<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-06 09:39:57
-->
<template>
  <div id="left1Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { time: "22-1-1", 平均湿度: 57 },
        { time: "22-1-2", 平均湿度: 49 },
        { time: "22-1-3", 平均湿度: 36 },
        { time: "22-1-4", 平均湿度: 87 },
        { time: "22-1-5", 平均湿度: 46 },
        { time: "22-1-6", 平均湿度: 68 },
        { time: "22-1-7", 平均湿度: 77 },
      ];

      const line = new Line("left1Container", {
        data,
        xField: "time",
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yField: "平均湿度",
        yAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                // lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        label: {},
        point: {
          size: 5,
          shape: "circular",
          style: {
            fill: "white",
            stroke: "#22488f",
            lineWidth: 3,
          },
        },
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(30, 55, 260, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        state: {
          active: {
            style: {
              shadowBlur: 8,
              // stroke: '#fff',
              fill: "white",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
      });

      line.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style scoped>
.sdfsdf {
  color: #386ac5;
}
</style>
